import Taro, { Component, Config } from '@tarojs/taro'
import { Button, Form, Input, View, Text } from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'
import { SERVICE_URL_V1 } from "@/config/config"
import { getShopList } from '@/api/merchantApi'
import { getAddressList, getUserInfo, getSignScore } from '@/api/userApi'
import { asyncCalcOrder, getConnectUser, goH5ToPay, goToWalletPay, submitOrder, goToPayInMp, afterToPay } from '@/api/orderApi'
import { getJsSdk } from '@/api/oauthApi'
import lodash from '@/utils/lodash'
import { PAY_TYPE, ADDITIONAL } from '@/config/types'
import { getShopCartGlobal, getFreightConfig, getAppletConfig, getBrand, getAppConfig, goodsScore, setReceiveAddress, getReceiveAddress } from '@/utils/storage'
// import OrderCardGoods from "@/components/order/cart-goods"
import OrderCardGoodsTwo from "@/components/order/cart-goods-two"
import OrderTimeout from "@/components/order/order-timeout"
import {
  Loading,
  ShopSelect,
  CouponSelect,
  AddressSelect,
  WalletPay,
  ReserveSelect,
  SelectCity, NeedScore, SalePrice, FyImg, ReceivingAddress
} from '@/components/index'
import { toOrderUnpaidPage, toOrderListPage, toCalcOrderPage } from '@/utils/page_router'
import { formatAmount, getSubscribeMessage, isWeChat, getRouterParams, setBackValue, getBackValue } from '@/utils/utils'
import { toWeChatLogin } from "@/api/oauthApi";
import styles from './index.module.scss'
import DeliveryIcon from '@/assets/images/delivery-icon.png'
import DiscountsIcon from '@/assets/images/discounts-icon.png'
import BackModal from './back-modal/index'
import AfterModal from './after-modal/index'
import { USER_INFO } from "@/config/storage";
import editimg from "@/assets/icon/edit.png"
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"



const isSubmit = ({ payType, userInfo, orderInfo }) => {
  return (PAY_TYPE.WALLET === payType ? userInfo.amount >= orderInfo.payAmount : true)
}

//  获取地址
const getAddress = (list, info) => {
  if (info && info.id) {
    return info
  } else {
    const arr = list.filter(i => i.isDefault)
    return (arr.length >= 1 ? lodash.head(arr) : lodash.head(list))
  }
}


export default class Index extends Component {
  state: any

  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTextStyle: process.env.navigationBarTextStyle,
    navigationBarBackgroundColor: process.env.backgroundColor
  }

  constructor() {
    super(...arguments)
    this.state = {
      params: {},
      type: 0,
      typeList: [
        { title: '快递配送', value: 0 },
        { title: '', value: 1 }
      ],
      loading: true,
      isScore: false,
      payType: PAY_TYPE.ALIPAY,
      payList: [],
      orderInfo: {},
      showShop: false,
      isReserve: Number(getFreightConfig('reserveStatus')),
      showCoupon: false,
      showAddress: false,
      showReserve: false,
      showWallet: false,
      userInfo: {},
      shopInfo: {},
      couponInfo: {},
      addressInfo: {},
      connectSnap: {},
      appointTime: '',
      shopList: [],
      couponList: [],
      productList: [],
      productNumber: null,
      addressList: [],
      showSelectCity: false,
      status: false,
      tipList: ADDITIONAL,
      // backVisible: false,
      backVisible: !!Taro.getStorageSync('popstate'),
      isBack: false,
      afterVisible: false,
      showRule: false,
    }
  }

  componentDidMount() {
    if (Taro.getStorageSync('popstate')) {
      Taro.removeStorageSync('popstate')
    } else {
      Taro.setStorageSync('popstate', 1)
      history.pushState(null, null, document.URL);
    }

    this.setState({
      params: getRouterParams(this),
    }, () => {
      this.initOrder()
    })
  }

  //  确认
  onChangeBack() {
    // Taro.setStorageSync('popstate', 1)
    history.pushState(null, null, document.URL);
    this.state.backVisible = false
  }

  //  输入时触发
  onInputAddress(name, { detail: { value } }) {

    const { addressInfo } = this.state
    addressInfo[name] = value
    this.setState({
      addressInfo
    })
  }

  // 失去光标
  // onInputBlur(key, { detail: { value } }) {
  // const myReg = /^1(3|4|5|7|8|9)\d{9}$/
  // if (key === 'telephone') {
  //   if (!myReg.test(value)) {
  //     Taro.showToast({ title: '请输入正确的联系电话', icon: 'none' })
  //     return
  //     console.log('输入有误')
  //   }
  // value.replace(/^1(3|4|5|7|8|9)\d{9}$/)
  // }
  // console.log(value)
  // }

  //  获取微信配置
  getWxConfig() {
    getJsSdk(['chooseWXPay']).then(({ data }) => {
      wx.config(data)
    })
  }

  //  初始化订单
  async initOrder() {
    const addressRes = await getConnectUser().then(({ data }) => (data || {}))
    // console.log(addressRes)
    // const userRes = await getUserInfo()
    this.setState({
      addressInfo: addressRes
      // userInfo: userRes.data,
      // shopInfo: lodash.head(shopRes.data),
      // shopList: shopRes.data,
      // addressInfo: getAddress(addressRes.data || [], addressInfo),
      // addressList: addressRes.data || []
    }, () => {
      this.calcOrder()
      // this.initPayType()
    })
  }

  //  初始化支付类型
  initPayType() {
    // const { orderInfo } = this.state
    // console.log(orderInfo)
    // const payList = {
    //   wx: { name: '微信支付',desc: '微信便捷支付', value: PAY_TYPE.WECHAT, },
    //   alipay: { name: '支付宝支付',desc: '支付宝便捷支付', value: PAY_TYPE.ALIPAY, },
    //   after: { name: '货到付款',desc: '收货再支付', value: PAY_TYPE.AFTER, }
    // }
    // const payType = getAppConfig('payType').split(',')
    // console.log(payType)
    // const list = payType.map(item => {
    //   return payList[item]
    // })
    // console.log(list)
    // const { openAliPay, openWeChatPay } = getAppletConfig()

    // const list:any = []

    // if (openWeChatPay != 0) {
    //   isWeChat() && this.getWxConfig()
    //   list.push({
    //     name: '微信支付',
    //     desc: '微信便捷支付',
    //     value: PAY_TYPE.WECHAT,
    //     text: '推荐'
    //   })
    // }

    // if (openAliPay != 0 && !isWeChat()) {
    //   list.push({
    //     name: '支付宝支付',
    //     desc: '支付宝便捷支付',
    //     value: PAY_TYPE.ALIPAY,
    //   })
    // }
  }

  //  计算订单
  calcOrder() {
    // const productList = getShopCartGlobal()
    const { params, loading, addressInfo, couponInfo, orderInfo, isScore, type, typeList } = this.state
    const data: any = {
      id: orderInfo.id,
      distribute: typeList[type]['value'],
      productList: params.cartList,
      userCouponId: couponInfo.id,
      couponDiscount: couponInfo.amount,
      scoreDiscount: isScore ? orderInfo.deductScoreAmount : undefined
    }

    //  是否单独购买（团购商品）
    if (params.fullPay) {
      data.fullPay = params.fullPay
    }

    if (addressInfo) {
      data.cityCode = addressInfo.cityCode
    }

    if (!loading) {
      Taro.showLoading({ title: '请稍后', mask: true })
    }
    asyncCalcOrder(data).then(res => {

      const { data } = res

      // 初始化支付类型
      const payList = {
        wx: { name: '微信支付', desc: '微信便捷支付', value: PAY_TYPE.WECHAT, },
        alipay: { name: '支付宝支付', desc: '支付宝便捷支付', value: PAY_TYPE.ALIPAY, },
        after: { name: '货到付款', desc: '先验货后付款', value: PAY_TYPE.AFTER, }
      }
      const payType = {}
      getAppConfig('payType').split(',').map(item => {
        payType[item] = payList[item]
      })
      const arr = data.payType.filter(item => payType[item])
      const list = arr.map(item => {
        return payType[item]
      })

      const { value }: any = lodash.head(list)

      let number = 0
      data.productList.map(item => {
        number = Number(item.number) + number
      })
      this.setState({
        orderInfo: data,
        couponList: data.couponList || [],
        productList: data.productList,
        productNumber: number,
        payType: value,
        payList: list,
      }, () => {
        Taro.hideLoading()
        this.setState({
          loading: false
        })
      })
    })
  }


  //  切换渲染类型
  onSwitchType(type) {
    // this.setState({
    //   type
    // }, () => {
    //   this.calcOrder()
    // })
  }

  //  切换支付类型
  onSwitchPayType(type) {
    this.setState({
      payType: type
    })
  }

  //  开启积分
  openScore(bool) {
    this.setState({
      isScore: !bool
    }, () => {
      this.calcOrder()
    })
  }

  //  确认选择
  onConfirmSelect(name, info) {
    const { couponInfo } = this.state
    if (name === 'couponInfo') {
      info = (couponInfo.id === info.id) ? {} : info
    }
    this.setState({
      [name]: info
    }, () => {
      if ((name === 'couponInfo' && couponInfo.id !== info.id) || name === 'addressInfo') {
        this.calcOrder()
      }
    })
  }

  //  显示城市弹窗
  showCityPopup(bool) {
    this.setState({
      showSelectCity: bool,
      status: bool
    })
  }

  //  确定选择城市
  onConfirmCity(id, names) {
    const { addressInfo } = this.state
    Object.assign(addressInfo, {
      cityCode: id,
      city: names
    })
    this.setState({
      addressInfo
    })
  }

  //  确认提交货到付款
  onChangeAfter() {
    const node: any = document.getElementsByClassName('index-scroll')
    node[0].requestSubmit()
  }

  //  提交表单
  onSubmit(e) {
    const { params } = this.$router
    const { type, payType, orderInfo, shopInfo, couponInfo, appointTime } = this.state
    const data: any = {
      id: orderInfo.id,
      payType,
      userCouponId: couponInfo.id,
      couponDiscount: couponInfo.amount
    }
    let receiveAddress = getReceiveAddress();
    let addressInfo = receiveAddress.addressInfo;

    let addressSnap = {
       ...addressInfo
    }
    data.connectSnap = addressSnap;

    Taro.showLoading({ title: '请稍后', mask: true })
    submitOrder(data).then(({ data }) => {
      if (isWeChat()) {
        this.wechatPay(data)
      } else {
        if (payType === PAY_TYPE.WECHAT) { this.h5WechatPay(data) }
        if (payType === PAY_TYPE.ALIPAY) { this.h5AliPay(data) }
        if (payType === PAY_TYPE.AFTER) {
          afterToPay(data).then(() => {
            Taro.showToast({
              title: '提交成功', icon: 'success', complete: function () {
                getSignScore().then(({ data }) => {
                  const obj = Taro.getStorageSync(USER_INFO)
                  obj.totalScore = data.totalScore
                  Taro.setStorageSync(USER_INFO, obj)
                })
                toOrderListPage(true)
              }
            })
          })
        }
      }
    })
  }

  //  H5 微信支付
  h5WechatPay(orderId) {
    goH5ToPay(orderId).then(({ data }) => {
      Taro.hideLoading()
      window.location.replace(data)
    })
  }

  //  H5 支付宝支付
  h5AliPay(orderId) {
    Taro.hideLoading()
    window.location.replace(`${SERVICE_URL_V1}/ali-pays/h5-to-pay/${orderId}`)
  }

  //  公众号微信支付
  wechatPay(orderId) {
    // Taro.showToast({title: '这是刚进来'})
    goToPayInMp(orderId).then(res => {
      let data = res.data
      Taro.hideLoading()
      Taro.requestPayment({
        ...data,
        success: () => {
          // // Taro.showToast({title: '这是成功'})
          // Taro.hideLoading()
          Taro.showToast({
            title: '支付成功', icon: 'success', complete: function () {
              toOrderListPage(true)
            }
          })
        },
        fail: function () {
          // Taro.showToast({title: '这是失败'})
          Taro.showToast({
            title: '支付取消', icon: 'none', complete: function () {
              toOrderUnpaidPage(orderId, true)
            }
          })
        }
      })
    })
  }


  //  取消钱包支付
  onCancelWalletPay() {
    const { orderInfo } = this.state
    toOrderUnpaidPage(orderInfo.id, true)
  }

  //  确定钱包支付
  onConfirmWalletPay() {
    const { orderInfo } = this.state
    Taro.showLoading({ title: '请稍后', mask: true })
    goToWalletPay(orderInfo.id).then(() => {
      Taro.hideLoading()
      Taro.showToast({ title: '扣款成功', icon: 'success' })
      toOrderListPage(true)
    })
  }

  // //  确认选择预订时间
  // onConfirmReserve(time) {
  //   Taro.showLoading({ title: '请稍后', mask: true })
  //   this.setState({
  //     appointTime: time,
  //     showReserve: false
  //   }, () => {
  //     setTimeout(() => {
  //       Taro.hideLoading()
  //     }, 500)
  //   })
  // }

  // //  拉起支付
  // createMiniWechatAppPay(orderId) {
  //   goToPayInMp(orderId).then(res => {
  //     let data = res.data
  //     console.log({...data})
  //     Taro.requestPayment({
  //       ...data,
  //       success: () => {
  //         console.log('success')
  //         Taro.hideLoading()
  //         Taro.showToast({ title: '支付成功', icon: 'success', complete: function () {
  //             toOrderListPage(true)
  //           }
  //         })
  //       },
  //       fail: function () {
  //         console.log('fail')
  //         Taro.hideLoading()
  //         Taro.showToast({ title: '支付取消', icon: 'none', complete: function () {
  //             toOrderUnpaidPage(orderId, true)
  //           }
  //         })
  //       }
  //     })
  //   })
  // }

  //
  componentWillMount() {
    let receiveAddress = getReceiveAddress();
    this.setState({
      addressInfoData: receiveAddress.addressInfo
    })
  }

  //打开兑换币规则
  toEdit(value) {
    this.setState({
      showRule: value
    })
  }

  onShow() {
    this.setState({
      afterVisible: true,
    })
    return false
  }

  //修改地址
  toOpenAddress() {
    this.refs.ReceivingAddress.submitData();
    let receiveAddress = getReceiveAddress();
    this.setState({
      showRule: false,
      addressInfoData: receiveAddress.addressInfo
    })
  }

  render() {
    const {
      loading,
      type,
      typeList,
      payType,
      addressInfo,
      addressInfoData,
      userInfo,
      shopInfo,
      isReserve,
      couponInfo,
      connectSnap,
      couponList,
      addressList,
      productList,
      shopList,
      showCoupon,
      showShop,
      showAddress,
      showReserve,
      showWallet,
      orderInfo,
      appointTime,
      isScore,
      payList,
      showSelectCity,
      status,
      tipList,
      backVisible,
      afterVisible,
      productNumber,
      showRule
    } = this.state
    const disabled = !isSubmit({ payType, userInfo, orderInfo })
    return (<View id='calc-order-page' className='index calc-order-page'>
      {loading && <Loading isCover />}
      <Form className='index-scroll' onSubmit={this.onSubmit.bind(this)}>
        {/* <OrderTimeout seconds={180} className='order-timeout' /> */}
        {/* <View className='index-head delivery-type'> */}
        {/* <View className='type-list d-f a-i-f-e'>
            {typeList.map((i, k) => {
              return (<View key={k} className={classNames('type-item d-f a-i-c j-c-c', { active: type === k })} onClick={this.onSwitchType.bind(this, k)}>{i.title}</View>)
            })}
          </View> */}
        {/*{type == 0 && <View className='delivery-box d-f a-i-c j-c-b' onClick={this.setState.bind(this, { showAddress: true })}>*/}
        {/*  {addressInfo && <View className='address-box'>*/}
        {/*    <View className='base-address d-f a-i-c '>*/}
        {/*      <View className='user-name t-o-e'>{addressInfo.name}</View>*/}
        {/*      <View className='user-phone'>{addressInfo.telephone}</View>*/}
        {/*    </View>*/}
        {/*    <View className='address-text t-o-e-2'>{addressInfo.city} {addressInfo.detail}</View>*/}
        {/*  </View>}*/}
        {/*  {!addressInfo && <View className='address-box'>设置收货地址</View>}*/}
        {/*  <View className='bnn-icon right-icon'>&#xe866;</View>*/}
        {/*</View>}*/}
        {/*{type == 1 && <View className='delivery-box d-f a-i-c j-c-b' onClick={this.setState.bind(this, { showShop: true })}>*/}
        {/*  <View className='address-box'>*/}
        {/*    <View className='base-address d-f a-i-c '>*/}
        {/*      <View className='user-name t-o-e'>{shopInfo.shopName}</View>*/}
        {/*      <View className='user-phone'>{shopInfo.phone}</View>*/}
        {/*    </View>*/}
        {/*    <View className='address-text t-o-e-2'>{shopInfo.address}</View>*/}
        {/*  </View>*/}
        {/*  <View className='bnn-icon right-icon'>&#xe866;</View>*/}
        {/*</View>}*/}
        {/* <View className='card-list address-icon'>
            <View className='list-item thin-border__b'>
              <View className='item-left'>联系人</View>
              <View className='item-right'>
                <Input name='addressSnap.name' value={addressInfo.name} maxLength={16} placeholder='请输入联系姓名' className='item-input' onInput={this.onInputAddress.bind(this, 'name')}/>
              </View>
            </View>
            <View className='list-item thin-border__b'>
              <View className='item-left'>联系电话</View>
              <View className='item-right'>
                <Input
                  name='addressSnap.telephone'
                  type='number'
                  value={addressInfo.telephone}
                  maxLength={11}
                  placeholder='请输入联系电话'
                  className='item-input'
                  onInput={this.onInputAddress.bind(this, 'telephone')}
                  // onBlur={this.onInputBlur.bind(this, 'telephone')}
                />
              </View>
            </View>
            <View className='list-item thin-border__b'>
              <View className='item-left'>所在地区</View>
              <View className='item-right'>
                <Input name='addressSnap.city' value={addressInfo.city} disabled placeholder='请选择所在地区' className='item-input' onClick={this.showCityPopup.bind(this, true)}/>
                <Input name='addressSnap.cityCode' value={addressInfo.cityCode} className='item-input display-none'/>
              </View>
            </View>
            <View className='list-item thin-border__b'>
              <View className='item-left'>详细地址</View>
              <View className='item-right'>
                <Input name='addressSnap.detail' value={addressInfo.detail} placeholder='请输入详细地址' className='item-input' onInput={this.onInputAddress.bind(this, 'detail')}/>
              </View>
            </View>
            <View className='list-item f-w-w'>
              <View className='item-left'>备注信息</View>
              <View className='item-right'>
                <Input name='remark' maxLength={255} placeholder='备注（150字以内）' className='item-input'/>
              </View>
            </View>
          </View> */}
        {/* </View> */}
        <View className='card-list address-icon '>
          <View className='order-card cart-list addressinfo'>
            <View className="addressinfo-info">
              <Text style="margin-right:10px;">{addressInfoData.name}</Text>
              <Text>{addressInfoData.telephone}</Text>
            </View>
            <View>
              <Text style="margin-right:10px;">{addressInfoData.city}</Text>
              <Text>{addressInfoData.detail}</Text>
            </View>
            <View className="edit-box">
              <FyImg className='bnn-icon' src={editimg} />
              <View onClick={this.toEdit.bind(this, true)} >编辑</View>
            </View>
          </View>
        </View>
        <img className="addImg" src="" alt="" />
        <View className='order-card cart-list'>
          {productList.map((cart, key) => {
            return (<OrderCardGoodsTwo key={cart.id} info={cart} className={classNames('cart-item', {
              'thin-border__b': key < productList.length - 1
            })} />)
          })}
          <View className={styles.tips}>
            <View className={styles.tipLeft}>放心购</View>
            <View className={styles.tipList}>
              {tipList.map(item => {
                return (<View className={styles.tipsItem}>{item}</View>)
              })}
            </View>
          </View>
        </View>
        <View>
          {/*<View className='order-card'>*/}
          {/*  <View className='card-list'>*/}
          {/*    {isReserve && type === 0 && <View className='list-item thin-border__b' onClick={this.setState.bind(this, { showReserve: true })}>*/}
          {/*      <View className='item-left'>配送时间</View>*/}
          {/*      <View className='item-right'>*/}
          {/*        {appointTime && <View className='t-o-e'>{appointTime}</View>}*/}
          {/*        {!appointTime && <View className='t-o-e placeholder-color'>不限时间</View>}*/}
          {/*        <View className='bnn-icon right-icon'>&#xe866;</View>*/}
          {/*      </View>*/}
          {/*    </View>}*/}
          {/*    <View className='list-item thin-border__b' onClick={this.setState.bind(this, { showCoupon: true })}>*/}
          {/*      <View className='item-left'>优惠券</View>*/}
          {/*      <View className='item-right'>*/}
          {/*        {couponInfo.title && <View className='t-o-e'>{couponInfo.title}</View>}*/}
          {/*        {!couponInfo.title && <View className='t-o-e placeholder-color'>不使用</View>}*/}
          {/*        <View className='bnn-icon right-icon'>&#xe866;</View>*/}
          {/*      </View>*/}
          {/*    </View>*/}
          {/*    {!!orderInfo.deductScoreAmount && <View className='list-item thin-border__b'>*/}
          {/*      <View className='item-left'>可用{orderInfo.canDeductScore}积分</View>*/}
          {/*      <View className='item-right placeholder-color'>*/}
          {/*        抵用<View className='integral-num bnn-number'>￥{orderInfo.deductScoreAmount}</View>*/}
          {/*        <View className='check-box d-f a-s-c' onClick={this.openScore.bind(this, isScore)}>*/}
          {/*          {!isScore && <View className='unchecked-icon'/>}*/}
          {/*          {isScore && <View className='bnn-icon unchecked-icon check-icon'>&#xe645;</View>}*/}
          {/*        </View>*/}
          {/*      </View>*/}
          {/*    </View>}*/}

          {/*    {type === 0 && <View className='list-item thin-border__b'>*/}
          {/*      <View className='item-left'>快递费用</View>*/}
          {/*      <View className='item-right bnn-number'>￥{orderInfo.freightAmount}</View>*/}
          {/*    </View>}*/}
          {/*    {type === 1 && <View className='list-item thin-border__b'>*/}
          {/*      <View className='item-left'>联系人</View>*/}
          {/*      <View className='item-right'>*/}
          {/*        <Input name='connectSnap.name' value={connectSnap.name} maxLength={16} placeholder='请填写您的联系姓名' className='item-input'/>*/}
          {/*      </View>*/}
          {/*    </View>}*/}
          {/*    {type === 1 && <View className='list-item thin-border__b'>*/}
          {/*      <View className='item-left'>联系电话</View>*/}
          {/*      <View className='item-right'>*/}
          {/*        <Input name='connectSnap.telephone' type='number' value={connectSnap.telephone} maxLength={11} placeholder='请填写您的联系电话' className='item-input'/>*/}
          {/*      </View>*/}
          {/*    </View>}*/}
          {/*    <View className='list-item f-w-w'>*/}
          {/*      <View className='item-left'>备注信息</View>*/}
          {/*      <View className='item-right'>*/}
          {/*        <Input name='remark' maxLength={255} placeholder='请添加备注（150字以内）' className='item-input'/>*/}
          {/*      </View>*/}
          {/*    </View>*/}
          {/*  </View>*/}
          {/*</View>*/}

          {/*<View className='order-card'>*/}
          {/*  <View className='total-list'>*/}
          {/*    <View className='list-item'>*/}
          {/*      <View className='item-left'>商品总价：</View>*/}
          {/*      <View className='item-right bnn-number'>￥{formatAmount(orderInfo.productAmount)}</View>*/}
          {/*    </View>*/}
          {/*    <View className='list-item'>*/}
          {/*      <View className='item-left'>运费：</View>*/}
          {/*      <View className='item-right bnn-number'>￥{formatAmount(orderInfo.freightAmount)}</View>*/}
          {/*    </View>*/}
          {/*  </View>*/}
          {/*</View>*/}

          <View className='order-card pay-type' style="margin-top:10px;">
            <View className={styles.delivery}>
              <View className='d-f a-i-c'>
                <FyImg src={DeliveryIcon} className={styles.Icon} />
                <View>配送方式</View>
              </View>
              <View>免费包邮</View>
            </View>
            {<View className={styles.discounts}>
              <View className='d-f a-i-c'>
                <FyImg src={DiscountsIcon} className={styles.Icon} />
                <View>平台优惠</View>
              </View>
              <View className={styles.productPrice}>
                <View className={classNames(styles.priceItem)}>
                  <View>商品总价</View>
                  <View className='f-s-34'>
                    {goodsScore(orderInfo.needScore) && <Text>{orderInfo.needScore}{getBrand()}+</Text>}
                    {orderInfo.payAmount}元</View>
                </View>
                <View className={classNames(styles.priceItem)}>
                  {/*<View>{getBrand()}已抵扣</View>*/}
                  <View>优惠金额</View>
                  <View>{Number(orderInfo.originAmount) - Number(orderInfo.payAmount)}元</View>
                </View>
              </View>
            </View>}
          </View>

          <View className='order-card pay-type'>
            <View className='pay-title d-f a-i-c'>支付方式</View>
            <View className='type-list'>
              {
                payList.map(item => {
                  return (
                    <View className={classNames('type-item', payType === item.value && 'active')} onClick={this.onSwitchPayType.bind(this, item.value)}>
                      <View className='type-left f-g-5 thin-border__r'>
                        {item.value === PAY_TYPE.ALIPAY &&
                          <View className='type-icon alipay-icon bnn-icon'>&#xe884;</View>}
                        {item.value === PAY_TYPE.WECHAT &&
                          <View className='type-icon wechat-icon bnn-icon'>&#xe604;</View>}
                        {item.value === PAY_TYPE.AFTER &&
                          <View className='type-icon bnn-icon'>
                            <FyImg src={DeliveryIcon} className={styles.Icon} />
                          </View>}
                        <View className='type-title'>{item.name}{item.text && <Text className={styles.payTypeText}>({item.text})</Text>}</View>
                      </View>
                      <View className='type-right f-g-5'>{item.desc}</View>
                    </View>
                  )
                })
              }
              {/*<View className={classNames('type-item', payType === PAY_TYPE.ALIPAY && 'active')} onClick={this.onSwitchPayType.bind(this, PAY_TYPE.ALIPAY)}>*/}
              {/*  <View className='type-left f-g-5 thin-border__r'>*/}
              {/*    <View className='type-icon alipay-icon bnn-icon'>&#xe884;</View>*/}
              {/*    <View className='type-title'>支付宝支付</View>*/}
              {/*  </View>*/}
              {/*  <View className='type-right f-g-5'>支付宝便捷支付</View>*/}
              {/*</View>*/}
              {/*<View className={classNames('type-item', payType === PAY_TYPE.WECHAT && 'active')} onClick={this.onSwitchPayType.bind(this, PAY_TYPE.WECHAT)}>*/}
              {/*  <View className='type-left f-g-5 thin-border__r'>*/}
              {/*    <View className='type-icon wechat-icon bnn-icon'>&#xe604;</View>*/}
              {/*    <View className='type-title'>微信支付</View>*/}
              {/*  </View>*/}
              {/*  <View className='type-right f-g-5'>微信便捷支付</View>*/}
              {/*</View>*/}


              {/*<View className={classNames('type-item', payType === PAY_TYPE.WALLET && 'active')} onClick={this.onSwitchPayType.bind(this, PAY_TYPE.WALLET)}>*/}
              {/*  <View className='type-left f-g-5 thin-border__r'>*/}
              {/*    <View className='type-icon balance-icon bnn-icon'>&#xe6ec;</View>*/}
              {/*    <View className='type-title'>余额支付</View>*/}
              {/*  </View>*/}
              {/*  <View className='type-right f-g-5 bnn-number'>可用余额 {userInfo.amount}</View>*/}
              {/*</View>*/}
            </View>
          </View>
          <View className='index-foot--height' />
          <View className='index-foot d-f a-i-c fy-popup fy-popup--bottom'>
            <View className='total-num'>共{productNumber}件</View>
            <View className='total-money d-f f-d-c'>
              <View>合计：</View>
              <View className='d-f a-i-b total-money-amount j-c-e'>
                {/*<NeedScore price={orderInfo.needScore} priceSize={44} className='m-r-10'/>*/}
                {/*<SalePrice price={orderInfo.payAmount} priceSize={36}/>*/}
                {goodsScore(orderInfo.needScore) && <View>{orderInfo.needScore}{getBrand()}+</View>}
                <View>{orderInfo.payAmount}元</View>
                <View>(包邮)</View>
              </View>
              {/*<View className='money-num bnn-number'>￥{formatAmount(orderInfo.payAmount)}</View>*/}
            </View>
            {payType !== 'after' && <Button disabled={disabled} formType="submit" className='buy-now d-f a-i-c j-c-c' hoverClass='hover-class--btn'>安全支付</Button>}
            {/*{payType === 'after' && <Button className='buy-now d-f a-i-c j-c-c' hoverClass='hover-class--btn' onClick={this.setState.bind(this, { afterVisible: true })}>提交订单</Button>}*/}
            {payType === 'after' && <View className='buy-now d-f a-i-c j-c-c' hoverClass='hover-class--btn' onClick={this.onShow.bind(this)}>货到付款</View>}

          </View>
        </View>

        <View className='pay-tips--height' />
        <View className='pay-tips f-g-5'>
          <View className='pay-tips-icon bnn-icon'>&#xe622;</View>
          <View className='pay-tips-text'>您正在安全购物环境中，请放心购买</View>
        </View>
      </Form>
      <AtModal isOpened={showRule}>
        <AtModalContent>
          <ReceivingAddress ref="ReceivingAddress" showBottom={false} />
        </AtModalContent>
        <AtModalAction> <Button onClick={this.toOpenAddress.bind(this, false)} className="rule_btn">我知道了</Button> </AtModalAction>
      </AtModal>
      {/*<WalletPay*/}
      {/*  amount={orderInfo.payAmount}*/}
      {/*  isOpened={showWallet}*/}
      {/*  onCancel={this.onCancelWalletPay.bind(this)}*/}
      {/*  onConfirm={this.onConfirmWalletPay.bind(this)}*/}
      {/*/>*/}
      {/*{isReserve && <ReserveSelect*/}
      {/*  value={appointTime}*/}
      {/*  isOpened={showReserve}*/}
      {/*  onClose={this.setState.bind(this, { showReserve: false })}*/}
      {/*  onConfirm={this.onConfirmReserve.bind(this)}/>}*/}
      {/*<ShopSelect isOpened={showShop} item={shopInfo} list={shopList} onClose={this.setState.bind(this, { showShop: false })} onConfirm={this.onConfirmSelect.bind(this, 'shopInfo')}/>*/}
      {/*<AddressSelect isOpened={showAddress} item={addressInfo} list={addressList} onClose={this.setState.bind(this, { showAddress: false })} onConfirm={this.onConfirmSelect.bind(this, 'addressInfo')}/>*/}
      <CouponSelect isOpened={showCoupon} item={couponInfo} list={couponList} onClose={this.setState.bind(this, { showCoupon: false })} onConfirm={this.onConfirmSelect.bind(this, 'couponInfo')} />


      <SelectCity isOpened={showSelectCity} cityCode={addressInfo.cityCode} onConfirm={this.onConfirmCity.bind(this)} onClose={this.showCityPopup.bind(this, false)} />
      <BackModal show={backVisible} onChange={this.onChangeBack.bind(this)} onBack={this.setState.bind(this, { backVisible: false })} />
      <AfterModal show={afterVisible} onChange={this.onChangeAfter.bind(this)} onBack={this.setState.bind(this, { afterVisible: false })} />
    </View>)
  }
}
